<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="list"></div>


    <script>
        let data = {
            "Fish": {
                "trout": {},
                "salmon": {}
            },
            "Tree": {
                "Huge": {
                    "sequoia": {}, "oak": {}
                },
                "Flowering": {
                    "apple tree": {}, "magnolia": {}
                }
            }
        };

        function treeLi(data) {
            let str = '<ul>'
            Object.keys(data).forEach(el => {
                str += '<li>'
                str += el
                if (Object.keys(data[el]).length !== 0) {
                    str += treeLi(data[el]);
                }
                str += '</li>'
            });
            str += '</ul>';
            return str;
        }

        const list = document.getElementById('list')
        list.innerHTML = treeLi(data);



    </script>
</body>

</html>